{extend name='public/base' /}

{block name="content"}



<main class="content" style="min-height: 721px;">

    <div id="tags" class="container chip-container">
        <div class="card">
            <div class="card-content">
                <div class="tag-title center-align">
                    <i class="fas fa-tags"></i>&nbsp;&nbsp;文章标签
                </div>
                <div class="tag-chips">

                    {volist name='tag_num' id="v"}

                    <a href="/tag_show/{$v.name}" title="{$v.name}: {$v.articletag_count}">
                            <span class="chip center-align waves-effect waves-light chip-default categary_color" data-tagname="{$v.name}" >{$v.name}
                            <span class="tag-length">{$v.articletag_count}</span>
                            </span>
                    </a>
                    {/volist}

                </div>
            </div>
        </div>
    </div>

    <link rel="stylesheet" type="text/css" href="__FCSS__/jqcloud.css">
    <style type="text/css">
        #tag-wordcloud {
            width: 100%;
            height: 300px;
        }
    </style>

    <div class="container aos-init aos-animate" data-aos="fade-up">
        <div class="card">
            <div id="tag-wordcloud" class="card-content jqcloud" style="width: 1125px; height: 300px;"></div>
        </div>
    </div>

    <script type="text/javascript" src="__FJS__/jqcloud-1.0.4.min.js"></script>

    <script type="text/javascript">
        $('#tag-wordcloud').jQCloud(eval('{:json_encode($tag)}'),{
            autoResize: true
        });
    </script>
    =

</main>


<script>
    $(function () {
        $(".categary_color").each(function (i) {
            $(this).css({"background": rand_color()});
        })
    });
</script>

{/block}

